<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户上传</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/css/admin.css" media="all">
    </head>
    <body>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>用户批量注册</legend>
        </fieldset>

        <p style="color: red; margin: 10px 0 10px calc(50% - 129px);">上传文件仅支持Excel文件，格式为xlsx或xls</p>
        <div class="layui-upload-drag" id="upload" style="left: calc(50% - 129px)">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>

        <table id="errTable" lay-filter="errTable"></table>

        <script src="/layui/layui.js" charset="utf-8"></script>
        <script>
            layui.use(['upload', 'layer', 'table'], function () {
                const $ = layui.$;
                const layer = layui.layer;
                const upload = layui.upload;
                const table = layui.table;
                //拖拽上传
                upload.render({
                    elem: '#upload',
                    url: '/admin/views/userUpload',
                    accept: 'file',
                    acceptMime: '.xlsx,.xls',
                    number: 1,
                    before: function(obj){
                        layer.load(2, {time: 10*1000});
                    },
                    done: function (res) {
                        layer.closeAll('loading');

                        layer.msg(res.msg, {
                            anim: 5,
                            time: 1200
                        });

                        if (res.errMsg.length !== 0){
                            table.render({
                                elem: $('#errTable'), //指定原始表格元素选择器
                                //height: 315, //容器高度
                                limit: 200,
                                data: res.errMsg,
                                cols: [[
                                    {field: 'name', title: '用户姓名', width: 120},
                                    {field: 'username', title: '用户账号', width: 120}
                                ]]
                            });

                            layer.open({
                                type: 1,
                                title: '用户已存在或重复添加',
                                shade: .2,
                                area: ['260px', '300px'],
                                content: $('.layui-table-view'),
                                end: function(){
                                    $('.layui-table-view').css({'display': 'none'});
                                }
                            });
                        }
                    }
                });
            });
        </script>
    </body>
</html>